<template>
	<view class="cooperationWrite">
		<view style="height: 30rpx;"></view>
		<view class="signertitle">
			<text>活动信息</text>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text activity-name write_after iconfont">
					名称
				</view>
				<view class="write-input ">
					<input type="text" class="uni-input" name="roomNum" placeholder="活动名称" />
				</view>
			</view>
		</view>
		<view class="write-border">
			<view class="write-item r6">
				<view class="write-text activity-detail iconfont">
					类型
				</view>
			</view>
			<view class="write-item r7">
				<view class="write-input cooperationWrite-activityType">
					<scroll-view class="cooperationWrite-scroll" scroll-x="true" scroll-left="0" show-scrollbar="true">
						<view v-for="(item , index) in activityType" :key="index"
							:class="item.selected?'buttonSelected':''"
							@click="changeactivityTypeButtonColor('activityType',index)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text activity-place iconfont write_after iconfont">
					地点
				</view>
				<view class="write-item">
					<view class="write-input">
						<view class="uni-input" style="margin: 0; padding: 0;">
							<text class="cooperationWrite-address" @click="chooseLocation">{{write_address_main}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text activity-people write_after iconfont">
					需求人数
				</view>
				<view class="write-input" style="flex: 3;">
					<input type="text" class="uni-input" name="roomNum" placeholder="" />
				</view>
			</view>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text activity-datetime write_after iconfont">
					活动时间
				</view>
				<!-- 活动日期选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<!-- 活动开始日期选择器 -->
							<picker mode="date" :start="getDate('start')" :end="getDate('end')" @change="selectActivityStartDate">
								<view class="date-screen">{{activityStartDate==''?'开始日期':activityStartDate}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- 活动开始时间选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<picker mode="time"  @change="selectActivityStartTime">
								<view class="date-screen">{{activityStartTime==''?'开始时间':activityStartTime}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text write_after iconfont" style="height: 67rpx;">
				</view>
				<!-- 活动日期选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<!-- 活动结束日期选择器 -->
							<picker mode="date" :start="getDate('start')" :end="getDate('end')" @change="selectActivityEndDate">
								<view class="date-screen">{{activityEndDate==''?'结束日期':activityEndDate}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- 活动结束时间选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<picker mode="time"  @change="selectActivityEndTime">
								<view class="date-screen">{{activityEndTime==''?'结束时间':activityEndTime}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text sign-datetime write_after iconfont">
					报名时间
				</view>
				<!-- 报名日期选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<!-- 报名开始日期选择器 -->
							<picker mode="date" :start="getDate('start')" :end="getDate('end')" @change="selectSignStartDate">
								<view class="date-screen">{{signStartDate==''?'结束日期':signStartDate}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- 报名开始时间选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<picker mode="time"  @change="selectSignStartTime">
								<view class="date-screen">{{signStartTime==''?'结束时间':signStartTime}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text write_after iconfont" style="height: 67rpx;">
				</view>
				<!-- 报名日期选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<!-- 报名结束日期选择器 -->
							<picker mode="date" :start="getDate('start')" :end="getDate('end')" @change="selectSignEndDate">
								<view class="date-screen">{{signEndDate==''?'结束日期':signEndDate}}</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- 报名结束时间选择器 -->
				<view style="width: 30%;">
					<view class="date">
						<view class="datePicker">
							<picker mode="time"  @change="selectSignEndTime">
								<view class="date-screen">{{signEndTime==''?'结束时间':signEndTime}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="write-border">
			<view class="write-item r6">
				<view class="write-text activity-detail iconfont">
					详情
				</view>
			</view>
			<view class="write-item r7">
				<view class="write-input" style="margin-left: 100rpx">
					<textarea class="uni-input" placeholder="输入活动详细内容" style="float: right; width: 100%;" />
				</view>
			</view>
		</view>
		<view class="write-border">
			<view class="write-item r8">
				<view class="write-text activity-photo iconfont">
					封面照片
				</view>
			</view>
			<view class="write-item r9">
				<view class="write-input write-input-image" style="margin-left: 90rpx;">

					<view v-for="(item , index) in imgArr" :key="index" style="position: relative;">
						<image src="http://p1362.bvimg.com/10465/811d84ee9403038c.png" mode="aspectFit"
							@click="deleteImg(index)"
							style="position: absolute; top:-10rpx; right: -10rpx; z-index: 100; width: 35rpx; height: 35rpx;">
						</image>
						<image :src="item" mode="aspectFill" class="uni-input write-image" style="padding: 0;"></image>
					</view>
					<view v-if="get_imgArrLength()" class="write-image add-image" @click="chooseImg">

					</view>
				</view>
			</view>
		</view>
		<view class="signertitle">
			<text>发布者信息</text>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text releaseer-name write_after iconfont">
					姓名
				</view>
				<view class="write-input ">
					<input type="text" class="uni-input" name="roomNum" placeholder="请输入真实姓名" />
				</view>
			</view>
		</view>
		<view class="write-border ">
			<view class="write-item">
				<view class="write-text releaseer-phone write_after iconfont">
					电话
				</view>
				<view class="write-input ">
					<input type="text" class="uni-input" name="roomNum" placeholder="电话" />
				</view>
			</view>
		</view>

		<view style="height: 116rpx;">

		</view>
		<view class="bottom-bar">
			<view style="height: 0rpx;">

			</view>
			<view class="cooperationWrite-button">
				<button class="r-button1" @click="goBack">取 消</button>
				<button class="r-button2" @click="goBack">发 布</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// 时间选择
			const currentDate = this.getDate({
				format: true
			});
			const endDate = this.getDate({
				format: true
			});
			
			return {
				activityStartDate: '',//活动开始日期
				activityEndDate: '',//活动结束日期
				activityStartTime: '',//活动开始时间
				activityEndTime: '',//活动结束时间
				signStartDate: '',//报名开始时间
				signEndDate: '',//报名开始时间
				signStartTime: '',//报名开始时间
				signEndTime: '',//报名开始时间
				date_begin: currentDate,
				date_end: endDate,
				currentDate: new Date().toISOString().slice(0, 10),

				price: "0.00",
				write_address_main: "点击选择",
				imgArr: [],
				activityType: [{
						id: 0,
						selected: false,
						name: "青少年服务"
					},
					{
						id: 1,
						selected: false,
						name: "敬老助残"
					},
					{
						id: 2,
						selected: false,
						name: "扶贫帮困"
					},
					{
						id: 3,
						selected: false,
						name: "文明礼仪"
					}, {
						selected: false,
						name: "平安守护"
					},
					{
						selected: false,
						name: "环境保护"
					},
					{
						selected: false,
						name: "文化体育"
					},
					{
						selected: false,
						name: "便民服务"
					}
				]
			}
		},
		computed: {
			startDate_begin() {
				return this.getDate('start');
			},
			endDate_begin() {
				return this.getDate('end');
			},
			startDate_end() {
				return this.getDate('start');
			},
			endDate_end() {
				return this.getDate('end');
			}
		},
		methods: {
			//处理日期选择组件的日期数据
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type == 'start') {
					year = year - 5; //设置年份区间
				} else if (type == 'end') {
					year = year + 5;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			timeSelect(tindex) {
				this.currentIndex = tindex;
				// console.log(this.currentIndex);
			},
			
			// 活动日期时间
			
			//选择开始日期，获取选择结果
			selectActivityStartDate(e) {
				let _this = this
				_this.activityStartDate = e.target.value
				console.log(_this.activityStartDate);
			},
			//选择开始时间，获取选择结果
			selectActivityStartTime(e){
				let _this = this
				_this.activityStartTime = e.target.value
				console.log(_this.activityStartTime);
			},
			//选择结束日期，获取选择结果
			selectActivityEndDate(e) {
				let _this = this
				_this.activityEndDate = e.target.value
				console.log(_this.activityEndDate);
			},
			//选择结束时间，获取选择结果
			selectActivityEndTime(e){
				let _this = this
				_this.activityEndTime = e.target.value
				console.log(_this.activityEndTime);
			},
			
			// 报名日期时间
			
			//选择开始日期，获取选择结果
			selectSignStartDate(e) {
				let _this = this
				_this.signStartDate = e.target.value
				console.log(_this.signStartDate);
			},
			//选择开始时间，获取选择结果
			selectSignStartTime(e){
				let _this = this
				_this.signStartTime = e.target.value
				console.log(_this.signStartTime);
			},
			//选择结束日期，获取选择结果
			selectSignEndDate(e) {
				let _this = this
				_this.signEndDate = e.target.value
				console.log(_this.signEndDate);
			},
			//选择结束时间，获取选择结果
			selectSignEndTime(e){
				let _this = this
				_this.signEndTime = e.target.value
				console.log(_this.signEndTime);
			},
			// 选择时间 日期
			bindDateChange_begin: function(e) {
				this.date_begin = e.target.value;
			},
			bindDateChange_end: function(e) {
				this.date_end = e.target.value;
			},

			get_imgArrLength() {
				// console.log(this.imgArr.length);
				if (this.imgArr.length >= 4) {
					return false;
				} else {
					return true;
				}
			},
			chooseImg() {
				uni.chooseImage({
					count: 4 - this.imgArr.length,
					success: res => {
						this.imgArr = this.imgArr.concat(res.tempFilePaths);
					}
				})
			},

			deleteImg(index) {
				this.imgArr.splice(index, 1);
			},
			chooseLocation(e) {
				let thisObj = this;
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						thisObj.write_address_main = "地点：" + res.address;
					}
				})
			},
			changeactivityTypeButtonColor(obj, index) {
				switch (obj) {
					case 'activityType': {
						// for(var c of this.activityType)
						// {
						// 	c.selected = false;
						// }
						// console.log(this.activityType);
						for (var c = 0; c < this.activityType.length; ++c) {
							this.activityType[c].selected = false;
						}
						this.activityType[index].selected = true;
						break;
					}
					case 'brand': {
						for (var c = 0; c < this.brand.length; ++c) {
							this.brand[c].selected = false;
						}
						this.brand[index].selected = true;
						break;
					}
					case 'quality': {
						for (var c = 0; c < this.quality.length; ++c) {
							this.quality[c].selected = false;
						}
						this.quality[index].selected = true;
						break;
					}
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	@import url("../../common/iconfont.css");

	button::after {
		border: none
	}

	.buttonSelected {
		background-color: rgba(161, 191, 86, 1) !important;
		color: white !important;
	}

	.cooperationWrite {
		background-color: #f3f2f2;
	}

	.write-border {
		background-color: white;
		/* margin-top: 30rpx; */
		margin-bottom: 30rpx;
	}

	.write-item {
		display: flex;
		padding: 20rpx 0rpx;
		margin: 0 30rpx;
		background-color: white;

	}

	.write-text {

		flex: 1;
		font-size: 32rpx !important;
		line-height: 60rpx;
		padding-left: 90rpx;
		display: flex;
		align-items: center;
	}

	.cooperationWrite-activityType {
		display: flex;
	}

	.activityType-text {
		font-size: 32rpx !important;
		line-height: 60rpx;
		/* flex: 1; */
		align-items: center;
		/* padding-left: 30rpx; */
		width: 100rpx;
	}

	.cooperationWrite-scroll {
		flex: 6;
		align-items: center;
		line-height: 60rpx;
		white-space: nowrap;
		overflow: hidden;
		width: 400rpx;
	}

	.cooperationWrite-scroll view {
		display: inline-block;
		border-radius: 30rpx;
		background-color: rgb(229, 229, 234);
		padding: 2rpx 16rpx;
		margin: 0 10rpx;
		color: rgb(184, 184, 184);
		margin-bottom: 5rpx;
		font-size: 32rpx !important;
	}

	.write-input {
		flex: 4;
	}

	.write-input .uni-input {
		/* border: 0.5px solid #A6A7A6; */
		border-radius: 12rpx;
		padding: 10rpx;
		font-size: 32rpx;
		color: #A6A7A6;
		line-height: 40rpx;
		/* margin-right: 20rpx; */
	}

	.write-input-image view {
		display: inline-block;
		margin-right: 30rpx;
		/* margin-bottom: 30rpx; */
	}

	.write-image {
		height: 120rpx;
		width: 120rpx;
		border-radius: 30rpx !important;
	}

	.add-image {
		background-color: #c4c5c4;
		background-image: url(http://p1362.bvimg.com/10465/b00e7542e59400d2.png);
		background-repeat: no-repeat;
		background-size: 60rpx;
		background-position: center;
		/* border: 1px solid #A6A7A6; */
	}

	.cooperationWrite-address {
		background-color: #e3e3e3;
		border-radius: 40rpx;
		padding: 10rpx 20rpx;
		/* color: #6e6e6e; */
	}

	/* 活动名称 */
	.activity-name {
		/* content: '\ea10'; */
		background-image: url(http://p1362.bvimg.com/10465/27ea70b46dd42bce.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;

	}

	/* 活动地点 */
	.activity-place {
		/* content: '\ec8b'; */
		background-image: url(http://p1362.bvimg.com/10465/48c9e41364ed6619.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 活动详情 */
	.activity-detail {
		/* content: '\e613'; */
		background-image: url(http://p1362.bvimg.com/10465/20ffb25f9a715764.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 活动封面图片 */
	.activity-photo {
		/* content: '\e616'; */
		background-image: url(http://p1362.bvimg.com/10465/4997cdeb37362e12.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 活动需求人数 */
	.activity-people {
		background-image: url(http://p1362.bvimg.com/10465/a0339e0c09eb8c06.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 活动时间 */
	.activity-datetime {
		background-image: url(http://p1362.bvimg.com/10465/0d6439f7d1bf0f40.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 报名时间 */
	.sign-datetime {
		background-image: url(http://p1362.bvimg.com/10465/0d6439f7d1bf0f40.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 发布者姓名 */
	.releaseer-name {
		background-image: url(http://p1362.bvimg.com/10465/bc4b8ad64ba4b0d8.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 发布者电话 */
	.releaseer-phone {
		background-image: url(http://p1362.bvimg.com/10465/921a8ae04ce098cd.png);
		background-repeat: no-repeat;
		background-size: 50rpx;
		background-position: 0 center;
	}

	/* 日期选择器 */
	.date {
		font-size: 34rpx;
		width: 100%;
		height: 28.67rpx;
	}

	.datePicker {
		/* margin: 10rpx 20rpx; */
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		width: 100%;
		color: #8A8E93;
	}

	.dateTime {
		color: #8C8D8C;
	}

	.date-screen {
		width: 100%;
	}

	.cooperationWrite-button {
		display: flex;
	}

	.cooperationWrite-button button {
		width: 100%;
		border-radius: 50rpx;
		margin: 0 30rpx;
		font-size: 32rpx;
	}

	.cooperationWrite-button .r-button1 {
		background-color: #e3e3e3;
		color: white;
	}

	.cooperationWrite-button .r-button2 {
		background-color: rgba(161, 191, 86, 1);
		color: white;
	}

	.cooperationWrite-button .r-button1:active {
		background-color: rgba(227, 227, 227, 0.8);
	}

	.cooperationWrite-button .r-button2:active {
		background-color: rgba(161, 191, 86, 0.8);
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 20rpx 30rpx;
		box-shadow: 0rpx 10rpx 30rpx #dcdddc;
		z-index: 100;
		background-color: white;
	}

	/* // 黄色带框标题 */
	.signertitle {
		width: 26%;
		height: 60rpx;
		margin-left: 1.5%;
		margin-bottom: 40rpx;
		border: 6rpx solid #FEC06B;
		border-radius: 20rpx;
		align-content: center;
		display: flex;
		justify-content: center;
		// padding:6rpx;
		// background-color: #00AA7F;
		background-color: #FFFFFF;
	}

	.signertitle text {
		color: #FEC06B;
		font-size: small;
		font-weight: bold;
		margin-top: 10rpx;
	}
	
</style>
